<template>
  <el-card>
    <div>
      <el-card>
        <el-col :span="5" v-for="item in photo">
          <p>{{item.title}}</p>
          <el-image
              style="width: 100px; height: 100px; border-radius: 10px"
              :src="item.photos[0].url"
              :fit="contain"
              @click="album(item.photos)">
          </el-image>
        </el-col>
      </el-card>
    </div>
    <div v-if="judge">
      <el-card>
        <el-col :span="6" v-for="photo in item_photo">
          <el-image
              style="width: 150px; height: 150px ;border-radius: 10px"
              :src="photo.url"
              :fit="contain"
              :preview-src-list="srcList"
              @click="preview(photo.url)"></el-image>

        </el-col>
      </el-card>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "photo",
  data(){
    return{
      photo:[
        {
          title:'头像',
          photos:[
            {url:'https://img1.baidu.com/it/u=3569420573,2690721824&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'},
            {url:'https://img0.baidu.com/it/u=468539302,3909142183&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=676'},
            {url:'https://img1.baidu.com/it/u=931224076,2682476544&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'}]
        },
        {
          title:'背景',
          photos:[
            {url:'https://img0.baidu.com/it/u=468539302,3909142183&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=676'},
            {url:'https://img1.baidu.com/it/u=931224076,2682476544&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'}]
        },
        {
          title:'博客',
          photos:[
            {url:'https://img1.baidu.com/it/u=3569420573,2690721824&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'},
            {url:'https://img0.baidu.com/it/u=468539302,3909142183&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=676'}]
        },
      ],
      item_photo:[],
      srcList:['https://img0.baidu.com/it/u=468539302,3909142183&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=676'],
      judge:false
    }
  },
  methods:{
    album(item_photo){
      this.item_photo = item_photo;
      this.judge = true;
    },
    preview(proview){
      this.srcList[0] = proview;
    }
  }
}
</script>

<style scoped>

</style>